import React, { Component, MouseEvent, ReactNode } from 'react';

export class Button extends Component<{
    children: () => ReactNode
}> {
    /*
     Here we restrict all handleClicks to be exclusively on 
     HTMLButton Elements
    */
    handleClick(event: MouseEvent<HTMLButtonElement>) {
        event.preventDefault();
        console.log(event.target, 'event.target');
        console.log(event.currentTarget, 'event.currentTarget');

        // alert(event.currentTarget.tagName); // alerts BUTTON
    }

    /* 
      Generics support union types. This event handler works on
      HTMLButtonElement and HTMLAnchorElement (links).
    */
    handleAnotherClick(event: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) {
        event.preventDefault();
        alert('Yeah!');
    }

    render() {
        return <span onClick={this.handleClick}>
            {this.props.children()}
        </span>
    }
}

export default Button